<cdk-virtual-scroll-viewport tvsItemSize="38" headerHeight="38" auditTimeInMs="1" [style.flex]="1">
    <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Id </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>
        <ng-container matColumnDef="create_date">
            <th mat-header-cell *matHeaderCellDef> Date </th>
            <td mat-cell *matCellDef="let element"> {{element.create_date}} </td>
        </ng-container>
        <ng-container matColumnDef="timeSeconds">
            <th mat-header-cell *matHeaderCellDef> Time </th>
            <td mat-cell *matCellDef="let element"> {{element.timeSeconds}} </td>
        </ng-container>
        <ng-container matColumnDef="diff">
            <th mat-header-cell *matHeaderCellDef> Diff </th>
            <td mat-cell *matCellDef="let element"> {{element.diff}} </td>
        </ng-container>

        <ng-container matColumnDef="method">
            <th mat-header-cell *matHeaderCellDef> Event </th>
            <td mat-cell *matCellDef="let element" [style]="{'color': getMethodColor(element.method)}">
                {{element.method}}
            </td>
        </ng-container>

        <ng-container matColumnDef="Msg_Size">
            <th mat-header-cell *matHeaderCellDef> Msg Size </th>
            <td mat-cell *matCellDef="let element"> {{element.Msg_Size}} </td>
        </ng-container>

        <ng-container matColumnDef="srcIp_srcPort">
            <th mat-header-cell *matHeaderCellDef> Src IP/Host </th>
            <td mat-cell *matCellDef="let element">
                {{getAliasByIP(element.srcIp_srcPort)}}
            </td>
            </ng-container>

        <ng-container matColumnDef="srcPort">
            <th mat-header-cell *matHeaderCellDef> Sport </th>
            <td mat-cell *matCellDef="let element"> {{element.srcPort}} </td>
        </ng-container>

        <ng-container matColumnDef="dstIp_dstPort">
            <th mat-header-cell *matHeaderCellDef> Dst IP/Host </th>
            <td mat-cell *matCellDef="let element">
                {{getAliasByIP(element.dstIp_dstPort)}}
            </td>
            </ng-container>

        <ng-container matColumnDef="dstPort">
            <th mat-header-cell *matHeaderCellDef> Dport </th>
            <td mat-cell *matCellDef="let element"> {{element.dstPort}} </td>
        </ng-container>
        <ng-container matColumnDef="proto">
            <th mat-header-cell *matHeaderCellDef> Proto </th>
            <td mat-cell *matCellDef="let element"> {{element.proto | uppercase }} </td>
        </ng-container>
        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> Type </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onClickMessageRow(row, $event)">
        </tr>
    </table>
</cdk-virtual-scroll-viewport>